<template>
    <view>
        <!-- 参考文档： https://blog.csdn.net/zhuxiandan/article/details/105831909-->
        <!-- page-content -->
        <view class="page">
            <scroll-view scroll-y class="view-page-content" :refresher-enabled="refresher" :refresher-threshold="threshold"
                         :refresher-triggered="triggered" @refresherrefresh="refreshing" :scroll-anchoring="anchoring" @scrolltolower="infinite">
                <slot></slot>
                <load-more :status="loadMoreStatus" iconType="snow" v-if="infiniting"></load-more>
            </scroll-view>
        </view>
    </view>
</template>

<script>
    /**
     * refresher-enabled	boolean	false	否	开启自定义下拉刷新
     * refresher-threshold	number	45	否	设置自定义下拉刷新阈值
     * refresher-triggered	boolean	false	否	设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
     * scroll-anchoring	boolean	false	否	开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS overflow-anchor 属性。
     *
     * scrolltolower	eventhandle		否	滚动到底部/右边时触发
     * refresherrefresh	eventhandle		否	自定义下拉刷新被触发
     */


    export default {
        name: "uniScrollView",
        props: {
            // refresher 为true，启用下拉刷新
            refresher: {
                type: Boolean,
                default: false,
            },
            threshold: {
                type: Number,
                default: 100,
            },
            anchoring: {
                type: Boolean,
                default: true,
            },
            infiniting: {
                type: Boolean,
                default: false,
            },
        },
        data() {
            return {
                isRefreshing: false, // 是否在刷新中
                isInfiniting: this.infiniting, // 是否在加载中
                infiniteDisabled: false, // 是否禁用上拉加载
                triggered: true,
                loadMoreStatus: 'more', // 上拉加载的状态样式
            };
        },
        methods: {
            refreshing() {
                if (this.isRefreshing) return;
                this.isRefreshing = true
                this.triggered = true;
                this.isInfiniting = false; // 若下拉刷新和上拉加载同时存在，则每次刷新需要重置上拉加载状态
                this.$emit('onRefresh', { complete: this.refresherComplete});
            },
            refresherComplete() {
                this.triggered = false;
                this.isRefreshing = false;
                this.isInfiniting = true;
                this.infiniteDisabled = false;
            },
            infinite() {
                if(this.isInfiniting) {
                    this.loadMoreStatus = this.infiniteDisabled  ? 'noMore' : 'loading';
                    this.$emit('onInfinite', { setStatus: function(status, disabled) {
                            this.loadMoreStatus = status;
                            this.infiniteDisabled = disabled;
                        }.bind(this)});
                }
            },
        }
    }
</script>

<style lang="scss" scoped>
    .view-page-content {
        position: relative;
        width: 100%;
        height: 100%;
    }
</style>